import axios from "axios";
import React, {useEffect, useState} from "react";
import {Avatar, Button, Card, Col, List, Row, Space, Tag} from "antd";
import {LoadingOutlined} from "@ant-design/icons";
import SeccondFaceNext from "./seccondFaceNext";
import {Helmet} from "react-helmet";

const New4 = () => {

    const [newProductList,setNewProductList] = useState([]);

    const getNewList =  async () => {
        try {
            const response = await axios.get('http://localhost:8084/stock/top4',
            );
            setNewProductList(response.data.data);
        } catch (error) {
            console.error(error);
        }
    }

    useEffect(() => {
        getNewList();
    },[]);

        return (
            <div>
                {newProductList.length > 0 ? (
                    <Row>
                        <SeccondFaceNext/>
                        {newProductList.map((product, index) => (
                            <Col span="6" >
                                <div key={index}  style={{ height: '230px', width: '230px', textAlign: 'center', verticalAlign: 'middle', display: 'table-cell', overflow: 'hidden',backgroundColor:'#f5f5f5' }}>
                                    <Card style={{ backgroundColor: '#ffffff' }}>
                                        <a href={`/detail?id=${product.stockId}`}>
                                            <img src={`./profile/${product.picturePath}`} style={{ margin: '0px auto', position: 'relative', maxWidth: '235px', maxHeight: '235px', display: 'inline' }} alt={product.stockName} />
                                            <div style={{ position: 'absolute', top: '20px', left: '2j0px'}}>
                                                <Tag color="#f50">八折优惠</Tag>
                                                <Tag color="#87d068">新品上市</Tag>
                                            </div>
                                            <div style={{ backgroundColor: 'rgba(0, 0, 0, 0)' }}>
                                                <div style={{ height: '93px' }}>
                                                    <a style={{
                                                        fontFamily: "Microsoft YaHei",
                                                        display: "block",
                                                        textAlign: "center",
                                                        fontSize: "18px",
                                                        color: "#000000",
                                                        fontWeight: "normal",
                                                        textDecoration: "none",
                                                        marginTop: '20px',
                                                        whiteSpace: "nowrap",
                                                        overflow: "hidden",
                                                        textOverflow: "ellipsis",
                                                        width: '240px'
                                                    }}>
                                                        {product.stockName}
                                                    </a>
                                                    <p style={{
                                                        whiteSpace: "nowrap",
                                                        overflow: "hidden",
                                                        textOverflow: "ellipsis",
                                                        width: '240px'
                                                    }}>
                                                        {product.stockDetail}</p>
                                                    <span style={{
                                                        display: 'inline',
                                                        fontFamily: 'Microsoft YaHei',
                                                        fontSize: '16x',
                                                        color: '#ff0000',
                                                        fontWeight: 'bold',
                                                        textDecoration: 'none'
                                                    }}>价格：{product.stockPrice.toFixed(2)}/斤</span><br />
                                                    <span style={{
                                                        fontSize: '14px',
                                                        textDecoration: 'line-through'
                                                    }}><em>原价：{(product.stockPrice / 0.8).toFixed(2)}/斤</em></span>
                                                </div>
                                            </div>
                                        </a>
                                    </Card>
                            </div>

                            </Col>
                        ))}
                    </Row>
                ) : (
                    <LoadingOutlined />
                )}

            </div>

        )

}
export default New4;